<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华容道</title>
    <script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
    
    <link rel="stylesheet" href="huarongdaonew.css">
</head>
<body>
    <div class="title">
        <span>新华容道</span>
    </div>
    <div class="gamebody">
        <div class="gamebox">
            <div class="gameview">
                <div class="gamev"></div>
            </div>
            <div class="btnview">
                <button id="btn"></button>
                <div class="time">0</div>
                <div class="jieguo"></div>
            </div>
        </div>
        <div class="recoderbox">
            <h3>最快记录榜单</h3>
            <ol id="recoder">
                <li>第一面</li>
            </ol>
        </div>
    </div>
    <script>
        //页面加载完成执行js方法，(function() {})，即 $(document).ready(function())
        $(function (k){
            var ulobj = document.getElementById('recoder')
            for (var i=1; i <= 10; i++) {
                var liobj = document.createElement("li")
                liobj.innerHTML= "第"+i+"名"
                ulobj.appendChild(liobj)
            }
        })

        $(function (s){
            let gamestate = false//定义游戏状态，默认是结束状态或未开始即false。游戏开始中为true。
            let gamesecond = 0//定义一个时间，由于游戏未开始显示。
            let gameitemwidth = 160 //定义游戏格子的默认宽度
            let gamepane = 9//定义游戏格子数量默认是九宫格
            let gamepaneoffset = 3 //定义游戏格子偏移量，显示格子之间的空隙
            var gamemap = [];//用以记录游戏地图数据
            var gametime = null;
            //初始化游戏地图
            function initGameMap(total){
                gamepane = total
                let row = Math.pow(total,1/2)
                let sec = row
                let gameitemheight = gameitemwidth;

                for(var i = 0; i < row; i++)
                {
                    gamemap[i] = []
                    for (var j = 0; j < sec; j++)
                    {
                        var idef = i * sec + j
                        if (idef < total - 1) {
                            // $('.gamev').append('<div class="pane">' + '<img src="./cutimages/'+idef+'.png" alt="">' + '</div>')
                            // $('.gamev').append('<div class="pane">' + (idef + 1) + '</div>')
                            $('.gamev').append('<div class="pane"></div>')
                            $('.gamev .pane').eq(idef).css("background-image", 'url(./cutimages/'+(idef+1)+'.png)');
                        } else {
                            $('.gamev').append('<div class="pane kong">' + '</div>')
                        }
                        gamemap[i][j] = [i * gameitemwidth, j * gameitemwidth, idef + 1, idef + 1]
                        $('.gamev .pane').eq(idef).css("top", gamemap[i][j][0] + (gamepaneoffset+4)*(i+1));
                        $('.gamev .pane').eq(idef).css("left", gamemap[i][j][1] + (gamepaneoffset+4)*(j+1));
                        $('.gamev .pane').eq(idef).css("width", gameitemwidth);
                        $('.gamev .pane').eq(idef).css("height", gameitemwidth);
                        // $('.gamev .pane').eq(idef).css("background-image", 'url(./cutimages/'+(idef+1)+'.png)');
                    }

                }
            }

            //游戏移动操作格子
            function paneMove(total){
                let row = Math.pow(total, 1 / 2);
                let sec = row;
                let currnum = 0;
                let winnum = 0;
                let index = 0;

                if (gamestate) {
                    $('.gamev .pane').click(function (e){
                        currnum = parseInt($(this).text()==''?gamepane:$(this).text())
                        if (currnum==gamepane) {
                            return
                        }
                        Spance = findpane(total, gamepane);//找到空格子的位置信息
                        curr = findpane(total, currnum);//找到当前格子的位置信息
                        //判断当前数字是否可以移动到空位如果满足条件点击移动
                        if (Spance[0] == curr[0] && Math.abs(Spance[1] - curr[1]) == gameitemwidth || Spance[1] == curr[1] && Math.abs(Spance[0] - curr[0]) == gameitemwidth) {
                            let tmp = Spance[2];
                            Spance[2] = curr[2];
                            curr[2] = tmp;
                            drawGameUI(total);
                            gameCheckEnd(total);
                        }
                    })
                }
            }

            //查找格子的位置信息
            function findpane(total, currnum){
                let row = Math.pow(total,1/2)
                let sec = row

                for(var x = 0;x < row; x++) {
                    for (var y = 0; y < sec; y++) {
                        if(gamemap[x][y][2] == currnum) {
                            return gamemap[x][y]
                        }                      
                    }
                }
            }

            //初始化游戏UI
            function initUI (){
                let row = Math.pow(gamepane,1/2)
                $("#btn").text("开始");
                //设置地图的宽和高
                $(".gamev").width(row * gameitemwidth + (row+1)*(gamepaneoffset+5));
                $(".gamev").height(row * gameitemwidth + (row+1)*(gamepaneoffset+5));
            }

            //判断游戏是否结束
            function gameCheckEnd(){
                let row = Math.pow(gamepane,1/2)
                let sec = row
                let win = 0
                for (var x = 0; x < row; x++) {
                    for (var y = 0; y < sec; y++) {
                        if (gamemap[x][y][2] == gamemap[x][y][3]) {
                            win++
                        }
                    }
                }

                if (win == gamepane) {
                    gameEnd(true)
                }
            }

            //移动格子刷新界面
            function drawGameUI(){
                let row = Math.pow(gamepane,1/2)
                let sec = row

                for (var x = 0; x < row; x++) {
                    for (var y = 0; y < sec; y++) {
                        var idef = gamemap[x][y][2] - 1
                        $('.gamev .pane').eq(idef).css("top", gamemap[x][y][0] + (gamepaneoffset+4));
                        $('.gamev .pane').eq(idef).css("left", gamemap[x][y][1] + (gamepaneoffset+4));
                    }
                }
            }

            //开始游戏时，打乱格子顺序
            function gameStartRandomPane(total){
                let t = 0
                while (t < total) {
                    let row = Math.pow(gamepane,1/2)
                    let sec = row
                    let x = Math.floor(Math.random() * row);
                    let y = Math.floor(Math.random() * sec);
                    let x1 = Math.floor(Math.random() * row);
                    let y1 = Math.floor(Math.random() * sec);
                    let tmp = 0;
                    tmp = gamemap[x][y][2];
                    gamemap[x][y][2] = gamemap[x1][y1][2];
                    gamemap[x1][y1][2] = tmp;
                    t++;
                }
            }

            //游戏开始时，初始化一些设置
            function gameStart(total){
                gameStartRandomPane(total);
                drawGameUI();
                gamestate = true;
                paneMove(total);
                $("#btn").text("结束");
                gametime = setInterval(function () {
                    if (gamestate) {
                        gamesecond++;
                    }
                    $(".btnview .time").text(gamesecond + 'S');
                }, 1000);
                gameCheckEnd(total);
            }

            //游戏结束时，进行成绩处理等设置
            function gameEnd(win){
                if (win) {
                    $(".btnview .jieguo").text("恭喜过关！用时：" + gamesecond + "S");
                }
                else {
                    $(".btnview .jieguo").text("很遗憾，没有完成！用时：" + gamesecond + "S");
                }
                $("#btn").text("开始");
                $(".gamev .pane").off('click');
                gamestate = false;
                clearInterval(gametime);
                gamesecond = 0;
                $(".btnview .time").text(gamesecond);
                gametime = null;
            }

            //游戏开始按钮
            $("#btn").click(function () {
                if (gamestate) {
                    gameEnd();
                }
                else {
                    gameStart(gamepane);
                }
            })

            initGameMap(gamepane)
            initUI()
        })
        //document.write('宽度='+window.screen.availWidth*0.8+','+'高度='+window.screen.availHeight)
        // 屏幕分辨率的高： window.screen.height
        // 屏幕分辨率的宽： window.screen.width
        // 屏幕可用工作区高度： window.screen.availHeight
        // 屏幕可用工作区宽度： window.screen.availWidth
        // 网页可见区域宽： document.body.clientWidth
        // 网页可见区域高： document.body.clientHeight
    </script>
</body>
</html>